<template>
    <div class="container pt-24 max-w-7xl">
      <Title></Title>
      <!-- 时间轴容器 -->
      <div class="relative mx-auto px-4 animate-slide-down-fade-in">
        <!-- 遍历年份分组 -->
        <nav v-for="year in years" :key="year">
          <!-- 年份标题 -->
          <div class="py-4 mb-6">
            <h2 class="text-2xl font-bold text-foreground/80">{{ year }}</h2>
          </div>
          
          <!-- 时间轴项目 -->
          <div class="ml-4">
            <div v-for="item in timelineItems.filter((i: TimelineItem) => i.date.startsWith(year))" 
                 :key="item.date" 
                 class="relative pb-8 group">
              <!-- 时间轴线 -->
              <div class="absolute left-0 top-0 -ml-[2px] h-full w-[4px] bg-muted"></div>
              
              <!-- 内容区域 -->
              <div class="flex items-start">
                <!-- 时间轴圆点 -->
                <div class="absolute left-0 -ml-[6px] h-[12px] w-[12px] rounded-full border-2 border-muted bg-background transition-all duration-500 group-hover:border-primary"></div>
                  <!-- 日期 -->
                  <time class="text-sm text-muted-foreground w-16 text-right mr-8 group-hover:text-primary transition-all duration-500">
                    {{ item.date.split('-').slice(1).join('-') }}
                  </time>
                  
                  <!-- 标题和描述区域 -->
                  <div class="flex-1">
                    <div class="relative pb-4 cursor-pointer">
                      <div class="flex">
                        <!-- 标题 -->
                        <h3 class="text-foreground text-base origin-left transition-all duration-500 group-hover:scale-110 group-hover:text-primary">
                          【{{ item.description }}】{{ item.title }}
                        </h3>
                      </div>
                      <!-- 虚线 -->
                      <div class="absolute bottom-0 left-0 right-0 border-b border-dashed border-border"></div>
                    </div>
                  </div>
                </div>
            </div>
          </div>
        </nav>
      </div>
    </div>
</template>

<script lang="ts" setup>
import Title from "@/components/own/title/Title.vue";
import { computed } from 'vue';

// 定义 timelineItem 的类型
interface TimelineItem {
  date: string;
  title: string;
  description: string;
}

const timelineItems: TimelineItem[] = [
  { date: "2025-01-03", title: "使用AI生成Java单元测试", description: "Java" },
  { date: "2025-01-03", title: "AI生成单元测试-提示词", description: "中" },
  { date: "2024-12-03", title: "Nacos 热更新", description: "中" },
  { date: "2024-11-17", title: "微服务拆分", description: "中" },
  { date: "2023-10-19", title: "同一个Service内部调用开启事务", description: "中" },
  { date: "2023-10-16", title: "No provider available from registry RegistryDirectory", description: "中" },
  { date: "2023-10-13", title: "Dubbo接口级和应用级注册，Dubbo消费者注册到Nacos", description: "中" },
  { date: "2022-09-08", title: "优雅的入参校验，Valid常用校验", description: "中" },
  { date: "2022-09-08", title: "优雅的入参校验，Valid常用校验", description: "中" },
  { date: "2019-09-08", title: "优雅的入参校验，Valid常用校验", description: "中" },
  { date: "2017-09-08", title: "优雅的入参校验，Valid常用校验", description: "中" },
  { date: "2017-06-08", title: "AI生成单元测试-提示词", description: "中" },
];

// 计算所有不重复的年份并排序
const years = computed(() => {
  const uniqueYears = new Set(timelineItems.map(item => item.date.split('-')[0]));
  return Array.from(uniqueYears).sort((a, b) => b.localeCompare(a));
});
</script>

<style scoped>
</style>